<template>
  <div id="">
    圈子星球
    <p>
      {{ $store.state.user.name }} 积分：{{ $store.state.user.score }} <br />
      {{ $store.state.num }}
      <br />
      等级：{{ $store.getters.level }}
    </p>
    <!-- $store.commit方法调用mutations里面的 SET_SCORE方法并传入参数 100-->
    <button @click="$store.commit('SET_SCORE', 100)">改变积分为100</button>
    <!-- 不建议这样 -->
    <!-- <button @click="$store.state.num=50">直接改变50</button> -->
    <!-- 在任意组件都可以访问Store状态中的数据 -->
    <br />
    <hr />
    <!-- dispatch方法执行 actions中的changeScore方法并传入参数2000 -->
    <button @click="$store.dispatch('changeScore', 1000)">
      等待5秒把分数改变1000
    </button>
    <div>
      <mt-range
        v-model="rangeValue"
        :min="10"
        :max="90"
        :step="10"
        :bar-height="5"
      ></mt-range>
    </div>
    <!-- <span style="color: #1677FF;margin-left: 5px;" @click="copyOrderId(item.order_id)"> 复制 </span> -->
    <mt-search v-model="value"></mt-search>
    <van-cell title="选择单个日期" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" />
    <van-area
      title="省份"
      :area-list="areaList"
      value="410100"
      @confirm="comHd($event)"
    />

    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import Vue from "vue";
import { Calendar, Cell, Area } from "vant";
import VueGridLayout from "vue-grid-layout";

Vue.use(Area);
Vue.use(Calendar);
Vue.use(Cell);
import "vant/lib/calendar/style";
import "vant/lib/cell/style";
import "vant/lib/area/style";
import { areaList } from "@vant/area-data";
console.log({ ...areaList }, "areaList");
import { Search, Range } from "mint-ui";
import "mint-ui/lib/style.css";
Vue.component(Search.name, Search);
var testLayout = [
  { x: 0, y: 0, w: 2, h: 2, i: "0" },
  { x: 2, y: 0, w: 2, h: 4, i: "1" },
  { x: 4, y: 0, w: 2, h: 5, i: "2" },
  { x: 6, y: 0, w: 2, h: 3, i: "3" },
  { x: 8, y: 0, w: 2, h: 3, i: "4" },
  { x: 10, y: 0, w: 2, h: 3, i: "5" },
  { x: 0, y: 5, w: 2, h: 5, i: "6" },
  { x: 2, y: 5, w: 2, h: 5, i: "7" },
  { x: 4, y: 5, w: 2, h: 5, i: "8" },
  { x: 6, y: 3, w: 2, h: 4, i: "9" },
  { x: 8, y: 4, w: 2, h: 4, i: "10" },
  { x: 10, y: 4, w: 2, h: 4, i: "11" },
  { x: 0, y: 10, w: 2, h: 5, i: "12" },
  { x: 2, y: 10, w: 2, h: 5, i: "13" },
  { x: 4, y: 8, w: 2, h: 4, i: "14" },
  { x: 6, y: 8, w: 2, h: 4, i: "15" },
  { x: 8, y: 10, w: 2, h: 5, i: "16" },
  { x: 10, y: 4, w: 2, h: 2, i: "17" },
  { x: 0, y: 9, w: 2, h: 3, i: "18" },
  { x: 2, y: 6, w: 2, h: 2, i: "19" },
];
export default {
  components: {
    [Range.name]: Range,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data() {
    return {
      date: "",
      show: false,
      areaList,
      value: "",
      rangeValue: 100,
      layout: testLayout,
    };
  },
  methods: {
    comHd(e) {
      console.log(e);
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>

<style>
</style>
